<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
<head>
<%@ include file="/WEB-INF/jsp/include/easyui.jsp" %>
<%@ include file="/WEB-INF/jsp/include/layui-upload.jsp" %>
<script src="/plug-in/jquery-easyui-1.5.1/plugins/jquery.choosebox.js"></script>
<title>easyUI示例</title>
<link href="/icon/sys_icon.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
	.line{margin-top: 20px;}
	.item{padding: 30px;}
	.item-details{width:500px;height:350px;padding:10px;background:#fafafa;}
</style>
<script>
	$(function(){
		$(".collapsed_but").on("click",function(){
			$(this).parent().find(".panel-tool-collapse").click();
		});
		//$("#emailValidate").textbox("setText",'402880f25bf1a13f015bf1bc4d4e0001');
	});
	
	function onBeforeValidate(){
		alert();
	}
</script>
</head>
<body>
	<div>
			<div class="line"></div>
			<div class="easyui-panel" title="通用选择控件">
				<div class="item"> 
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;">
					 	<input name="commonChooose1" style="width:300px;" value="蜗牛" class="easyui-choosebox" data-options="label:'通用选择1:',boxWidth:700,boxTitle:'请选择短信套餐',textField:'nickName',valueField:'account',modleName:'user' "/>  
					 	<input id="commonChooose2" style="width:300px;height:100px" class="easyui-choosebox" data-options="label:'通用选择2:',boxWidth:700,boxTitle:'请选择人员2',textField:'nickName',valueField:'id',modleName:'user',singleSelect:true,multiline:true "/>  
					</div>
				</div>
				<div class="item-details easyui-panel" style="height:70px;" data-options="collapsed:false,collapsible:true,maximized:true">   
				 	<p>1. class="easyui-choosebox"</p>
				 	<p>2. textField属性文本域text值字段</p>
				 	<p>3. valueField属性文本域value值字段</p>
				 	<p>4. boxTitle[选择框标题名称],boxWidth[选择框宽度],boxHeight[选择框高度]</p>
				 	<p>5. boxUrl:xxxx[选择框地址],modleName:'user'[模块名称],singleSelect:true[单选],multiline:true[多行]</p>
				 	<p>6. 引入/plug-in/jquery-easyui-1.5.1/plugins/jquery.choosebox.js</p>
				</div> 
			</div>
			
			<div class="line"></div>
			<div class="easyui-panel" title="自动代码">
				<div class="item"> 
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input name="autoCode" style="width:300px;" class="easyui-autoCode" data-options="label:'自动代码:',required:true,prefix:'FS',suffix:'EN' "/>  
					</div>
				</div>
				<div class="item-details easyui-panel" style="height: 70px;" data-options="collapsed:false,collapsible:true,maximized:true">   
				 	<p>1. class="easyui-autoCode"</p>
				 	<p>2. prefix前缀</p>
				 	<p>3. suffix后缀</p>
				</div> 
			</div>
	
	
			<div class="line"></div>
			<div class="easyui-panel" title="验证示例">
				<div class="item">
					<!-- 唯一验证 -->
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input name="remoteName" style="width:240px;" class="easyui-textbox easyui-validatebox"  data-options="label:'唯一验证:',validType:{remote:['/console/user/remote','mobile']}" />  
					</div>
					<!-- 邮箱验证 -->
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input id="emailValidate" name="emailValidate" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'邮箱验证:',required:true,validType:'email' " />  
					</div>
					<!-- URL验证 -->
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input name="urlValidate" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'URL验证:',required:true,validType:'url',prompt:'请填写有效的url。'" />  
					</div>
					<!-- 长度验证 -->
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input name="lengthValidate" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'长度验证:',required:true,validType:'length[3,10]'" />  
					</div>
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input name="minLenValidate" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'最小长度:',required:true,validType:'minLen[3]'" />  
					</div>
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input name="maxLenValidate" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'最大长度:',required:true,validType:'maxLen[3]'" />  
					</div>
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input name="mobileValidate" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'手机验证:',required:true,validType:'mobile'" />  
					</div>
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input name="mobileValidate" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'座机验证:',required:true,validType:'phone'" />  
					</div>
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input name="digitsValidate" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'整数验证:',required:true,validType:'digits'" />  
					</div>
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input name="qqValidate" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'QQ验证:',required:true,validType:'qq'" />  
					</div>
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input name="cnValidate" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'中文验证:',required:true,validType:'cn'" />  
					</div>
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input name="enValidate" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'英文验证:',required:true,validType:'en'" />  
					</div>
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input name="zipValidate" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'邮编验证:',required:true,validType:'zip'" />  
					</div>
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input name="ipValidate" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'IP验证:',required:true,validType:'ip'" />  
					</div>
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input name="carNoValidate" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'车牌验证:',required:true,validType:'carNo'" />  
					</div>
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input id="equalToValidate1" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'同一验证:',required:true" />  
					</div>
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input id="equalToValidate2" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'同一验证:',required:true,validType:'equalTo[\'equalToValidate1\']'" />  
					</div>
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input id="decimalsValidate" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'数值验证:',required:true,validType:'decimals[2]'" />  
					</div>
					<div style="margin-bottom:20px;margin-top:5px;margin-left:10px;float:left;">
					 	<input id="moreValidate" style="width:240px;" class="easyui-textbox easyui-validatebox" data-options="label:'多重验证:',required:true,validType:['email','length[0,5]']"/>  
					</div>
				</div>
			</div>
			<div class="line"></div>
			<div class="easyui-panel" title="chooseiconbox控件示例">
				<div class="item">
					<!-- 功能按钮 -->
					<a href="#" class="easyui-linkbutton collapsed_but" iconCls="icon-reload" plain="true" >展开/收起</a>
					<!-- 示例 -->
					<div style="margin-bottom:20px">
					 	<input id="userIcon" class="easyui-chooseiconbox" name="userIcon" style="width:122px;" value="" data-options="label:'图标:',required:false" />
					</div>
					<div class="line"></div>
					
					<div class="item-details easyui-panel" style="height: 130px;" title="chooseiconbox控件示例" data-options="collapsed:true,collapsible:true,maximized:true">   
					</div>  
				</div>
			</div>
			
			<div class="line"></div>
			<div class="easyui-panel" title="combobox示例">
				<div class="item">
					<!-- 功能按钮 -->
					<a href="#" class="easyui-linkbutton collapsed_but" iconCls="icon-reload" plain="true" >展开/收起</a>
					<!-- 示例 -->
					<select class="easyui-combobox" name="demo1" style="width:240px;" data-options="label:'性别选择:'" url="/console/combobox?valueField=id&textField=dicName&modleName=dictionary&pCode=0000&pCode_searchType=eq&text=男" >
		  			</select>
					
					<div class="line"></div>
					
					<div class="item-details easyui-panel" title="combobox使用案例" data-options="collapsed:true,collapsible:true,maximized:true">   
						<p>
						1.combobox通过&lt;select&gt;元素创建一个预定义结构的下拉列表框(远程数据)。
						<pre class="brush:html;toolbar:false">&lt;select class=&quot;easyui-combobox&quot; name=&quot;demo1&quot; style=&quot;width:240px;&quot; data-options=&quot;label:&#39;性别选择:&#39;&quot; 
						        url=&quot;/console/combobox?valueField=id&amp;textField=dicName&amp;modleName=dictionary&amp;pCode=0000&amp;defaultText=男&amp;pCode_searchType=eq&quot; &gt;
						&lt;/select&gt;</pre>
						</p>   
						<p>p1:valueField 基础数据值名称绑定到该下拉列表框  </p>
						<p>p2:textField 基础数据字段名称绑定到该下拉列表框 </p>
						<p>p3:modleName 模块名称，参加【实体管理】列表 </p>
						<p>p4:pCode、pCode_searchType为对应实体模块的查询字段及查询方式，用于过滤数据</p>
						<p>p5:text指定默认值或数据回显</p>
						<p>
						
						<p><br/></p>
						2.combobox通过&lt;select&gt;元素创建一个预定义结构的下拉列表框(本地数据)。
						<pre class="brush:html;toolbar:false">&lt;select id=&quot;gender&quot; class=&quot;easyui-combobox&quot; name=&quot;gender&quot; style=&quot;width:200px;&quot;&gt;
						    &lt;option value=&quot;保密&quot;&gt;保密&lt;/option&gt;
						    &lt;option&gt;男&lt;/option&gt;
						    &lt;option&gt;女&lt;/option&gt;
						&lt;/select&gt;</pre>
						
						3.combobox表单页面通过Javascript创建下拉列表框(远程数据)
						<pre class="brush:html;toolbar:false">fn.combobox([
						    {
						            field: &#39;#gender&#39;, 
							    modleName: &#39;dictionary&#39;,
							    valueField:&#39;dicName&#39;,    
							    textField:&#39;dicName&#39;,
							    pCode: &#39;0000&#39;,
							    pCode_searchType: &#39;eq&#39;,
							    text:&#39;男&#39;
						    },
						    {......}
						]);</pre>
						</p>   
					</div>  
				</div>
			</div>
			<div class="line"></div>
			<div class="easyui-panel" title="combotree示例">
				<div class="item">
					<!-- 功能按钮 -->
					<a href="#" class="easyui-linkbutton collapsed_but" iconCls="icon-reload" plain="true" >展开/收起</a>
					<!-- 示例 -->
					<input class="easyui-combotree" name="demo2" style="width:240px;" 
						data-options="label:'树形单择:'" value="402881e45b38dd9f015b38e6fc6b0009"  url="/console/dictionary/combotree?pidField=parentId&textField=dicName" >
		  			</input>
		  			&nbsp;&nbsp;&nbsp;
		  			<input class="easyui-combotree" name="demo3" style="width:240px;" 
						data-options="label:'树形多择:',multiple:true" value="402881e45b38dd9f015b38e6fc6b0009"  url="/console/dictionary/combotree?pidField=parentId&textField=dicName&textOrValues=头条,推荐" >
		  			</input>
					<div class="line"></div>
					
					<div class="item-details easyui-panel" title="combotree使用案例" data-options="collapsed:true,collapsible:true,maximized:true">   
						<p>
						1.combotree通过&lt;input&gt;元素创建一个预定义结构的单选下拉列表框(远程数据)。
						<pre class="brush:html;toolbar:false">&lt;input class=&quot;easyui-combotree&quot; name=&quot;demo2&quot; style=&quot;width:240px;&quot; data-options=&quot;label:&#39;树形单择:&#39;&quot; 
							value=&quot;402881e45b38dd9f015b38e6fc6b0009&quot;  url=&quot;/console/dictionary/combotree?pidField=parentId&amp;textField=dicName&quot; &gt;
						&lt;/input&gt;</pre>
						</p>
						<p>p1:pidField 树形数据实体父元素标识字段</p>
						<p>p2:textField 树形数据展示文本字段 </p>
						<p>p3:idField 树形数据自身id标识字段 </p>
						<p>p3:modleName 模块名称，此处dictionary为modleName值</p>
						<p>p4:value为初始化值</p>
						<p>p5:textOrValues为初始化值或文本</p>
						<p>
						2.combotree通过&lt;select&gt;元素创建一个预定义结构的单选下拉列表框(远程数据)。
						<pre class="brush:html;toolbar:false">&lt;select class=&quot;easyui-combotree&quot; name=&quot;demo2&quot; style=&quot;width:240px;&quot; data-options=&quot;label:&#39;树形单择:&#39;&quot; 
							 url=&quot;/console/dictionary/combotree?pidField=parentId&amp;textField=dicName&quot; &gt;
						&lt;/select&gt;</pre>
						</p>
						3.combotree通过&lt;select&gt;元素创建一个预定义结构的多选下拉列表框(远程数据)。
						<pre class="brush:html;toolbar:false">&lt;select class=&quot;easyui-combotree&quot; name=&quot;demo2&quot; style=&quot;width:240px;&quot; data-options=&quot;label:&#39;树形单择:&#39;,multiple:true &quot; 
							 url=&quot;/console/dictionary/combotree?pidField=parentId&amp;textField=dicName&quot; &gt;
						&lt;/select&gt;</pre>
						</p>
					
					</div>  
				</div>
			</div>
			<div class="line"></div>
			<div class="easyui-panel" title="DataList示例">
				<div class="item">
					<!-- 功能按钮 -->
					<a href="#" class="easyui-linkbutton collapsed_but" iconCls="icon-reload" plain="true" >展开/收起</a>
					<!-- 示例 -->
					<ul class="easyui-datalist" url="/console/combobox?modleName=dictionary&text=保密" checkbox="true" style="width:400px;height:100px"> 
					    <li value="AL">Alabama</li> 
					    <li value="AK">Alaska</li> 
					</ul>  
					<div class="line"></div>
					
					<div class="item-details easyui-panel" style="height: 100px;" title="DataList使用案例" data-options="collapsed:true,collapsible:true,maximized:true">   
					<p>
					1.DataList过&lt;ul&gt;元素创建一个预定义结构的单选下拉列表框(本地数据)。
					<pre class="brush:html;toolbar:false">&lt;ul class=&quot;easyui-datalist&quot; title=&quot;DataList&quot; style=&quot;width:400px;height:250px&quot;&gt;
					    &lt;li value=&quot;AL&quot;&gt;Alabama&lt;/li&gt; 
					    &lt;li value=&quot;AK&quot;&gt;Alaska&lt;/li&gt; 
					&lt;/ul&gt;</pre>
					</p>
					<p>
					2.DataList过&lt;ul&gt;元素创建一个预定义结构的单选下拉列表框(远程数据)。
					<pre class="brush:html;toolbar:false">&lt;ul class=&quot;easyui-datalist&quot; title=&quot;DataList&quot; 
					    url=&quot;/console/combobox?modleName=dictionary&quot; checkbox=&quot;true&quot; style=&quot;width:400px;height:100px&quot;&gt; 
					&lt;/ul&gt;</pre>
					</p>
					</div>  
				</div>
			</div>
			
			<div class="line"></div>
			<div class="easyui-panel" title="layui-upload上传控件示例">
				<div class="item">
					<!-- 功能按钮 -->
					<a href="#" class="easyui-linkbutton collapsed_but" iconCls="icon-reload" plain="true" >展开/收起</a>
					<!-- 示例 -->
					<div style="margin-bottom:20px">
					 	<input class="easyui-layuiupload" value="4028800b5e313872015e320853240010" name="layuiupload" style="width:560px;" data-options="label:'附件上传:',upload:{auto:false}" />
					</div>
					<div class="line"></div>
					
					<div class="item-details easyui-panel" style="height: 130px;" title="layui-upload上传控件示例" data-options="collapsed:true,collapsible:true,maximized:true">   
						<p>
						    <span class="Apple-tab-span" style="white-space:pre">					</span>
						</p>
						<p>1.对input控件添加class：easyui-layuiupload</p>
						<p>2.有value值时根据value值进行回显</p>
						<p>3.data-options中的upload属性为自定义相关属性可以覆盖默认属性，具体写法参照http://www.layui.com/doc/modules/upload.html</p>
					</div>  
				</div>
			</div>
			
			
	</div>	
</body>
</html>